<template>
    <!-- 注册页 -->
  <div class="register-page">
            <!-- 头部 -->
        <mt-header>
            <router-link to="/auth/login" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
           <router-link  slot="right" style="font-size:16px;" to="/auth/login">登录</router-link >
        </mt-header>
         <!-- logo -->
        <div class="img-box">
            <img src="~@/assets/login_logo.png"/>
        </div>
        <!-- 注册选项 -->
        <div class="register-select" v-if="searchCondition.type==0">
            <div class="m">
                <p class="m-1">个人</p>
                <p class="m-2">好项目都在筑功者</p>
                <div class="m-img">
                    <img src="~@/assets/m.png"/>
                </div>
                <p class="m-project" @click="turn_m">去找项目</p>
            </div>
            <div class="m">
                <p class="m-1">企业</p>
                <p class="m-2">能工巧将都在筑功者</p>
                <div class="m-img">
                    <img src="~@/assets/c.png"/>
                </div>
                <p class="m-project" @click="turn_c">去找能人</p>
            </div>
        </div>
        <!-- 注册个人选项 -->
        <div class="register-m" v-if="searchCondition.type==1">
            <div class="m-title">
                <p class="person">个人</p>
                <p class="person-right">
                    <span class="m-fenge"></span>
                    <span>好项目都在筑功者</span>
                </p>
            </div>
             <!-- 请输入您的手机号 -->
            <div class="input-phone">
                 <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-msnui-tel"></use>
                 </svg>
                 <input type="tel" placeholder="请输入您的手机号" v-model="searchCondition.phone"/>
            </div>
             <div class="input-phone">
                 <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-mima"></use>
                 </svg>
                 <input type="password" placeholder="请输入您的密码" v-model="searchCondition.pwd"/>
            </div>
            <!-- 请输入验证码 -->
             <div class="input-yanzheng">
                <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <input type="number" placeholder="请输入验证码" v-model="searchCondition.smscode"/>
                <span class="fenge"></span>
                <div class="cl-cell-title t2" @click="_sendSmsCode">
                    <span v-show="show" class="cl-cell-text">获取验证码</span>
                    <span v-show="!show" class="cl-cell-text">{{count}} s后重试</span>
                </div> 
            </div>
            <!-- 注册 -->
            <br>
            <mt-button type="primary" size="large" @click="handleSubmit">注册</mt-button>
            <!-- 已同意协议 -->
            <div class="m-xieyi">
                <div class="xieyi-left">
                    <el-checkbox v-model="checked"></el-checkbox>
                    <span class="left-2">已同意</span>
                    <span class="left-3">筑功者用户协议及隐私政策</span>
                </div>
                <div class="xieyi-right" @click="turn_c">
                    <span>我是企业</span>
                    <svg class="icon icon-jia" aria-hidden="true">
                        <use xlink:href="#icon-shang-copy-copy-copy"></use>
                    </svg>
                </div>
            </div>
        </div>
         <!-- 注册公司选项 -->
        <div class="register-m" v-if="searchCondition.type==2">
            <div class="m-title">
                <p class="person">企业</p>
                <p class="person-right">
                    <span class="m-fenge"></span>
                    <span>能工巧匠都在筑功者</span>
                </p>
            </div>
             <!-- 请输入您的手机号 -->
            <div class="input-phone">
                 <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-msnui-tel"></use>
                 </svg>
                 <input type="tel" placeholder="请输入您的手机号" v-model="searchCondition.phone"/>
            </div>
             <div class="input-phone">
                 <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-mima"></use>
                 </svg>
                 <input type="password" placeholder="请输入您的密码" v-model="searchCondition.pwd"/>
            </div>
            <!-- 请输入验证码 -->
             <div class="input-yanzheng">
                <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <input type="number" placeholder="请输入验证码" v-model="searchCondition.smscode"/>
                <span class="fenge"></span>
                <div class="cl-cell-title t2" @click="_sendSmsCode">
                    <span v-show="show" class="cl-cell-text">获取验证码</span>
                    <span v-show="!show" class="cl-cell-text">{{count}} s后重试</span>
                </div>
            </div>
            <!-- 注册 -->
            <br>
            <mt-button type="primary" size="large" @click="handleSubmit">注册</mt-button>
            <!-- 已同意协议 -->
            <div class="m-xieyi">
                <div class="xieyi-left">
                    <el-checkbox v-model="checked"></el-checkbox>
                    <span class="left-2">已同意</span>
                    <span class="left-3">筑功者用户协议及隐私政策</span>
                </div>
                <div class="xieyi-right" @click="turn_m">
                    <span>我是个人</span>
                    <svg class="icon icon-jia" aria-hidden="true">
                        <use xlink:href="#icon-shang-copy-copy-copy"></use>
                    </svg>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import { Header, MessageBox } from "mint-ui";
import { SendSmsCode, VerifySmsCode } from "@/api/filter";
import { Register } from "@/api/user/auth";
import { InviteRecord } from "@/api/user/index";
import cache from "@/utils/cache";
export default {
  data() {
    return {
      searchCondition: {
        phone: "",
        pwd: "",
        smscode: "",
        type: 0,
        inviteId:0,
      },
      show: true,
      count: "",
      timer: 0,
      checked: true
    };
  },
  methods: {
    handleSubmit() {
      if (this.searchCondition.phone == "") {
        this.$toast("请填写正确的手机号");
        return;
      }
      if (this.searchCondition.smscode == "") {
        this.$toast("请输入短信验证码");
        return;
      }
      if (this.searchCondition.pwd == "") {
        this.$toast("请输入登录密码");
        return;
      }
      if(this.checked == false) {
        this.$toast("请同意隐私政策才能完成注册");
        return;
      }
      var $router = this.$router;
         //判断是否是被邀请的
      var curid=_getCookie("zgz_fx_pid");
      this.searchCondition.inviteId=curid;
      Register(this.searchCondition).then(res => {
        if (res.StatusCode === 200) {
          console.log(res.Data);
            this.$store.state.userinfo.id=res.Data.id;
            this.$store.state.userinfo.name=res.Data.name;
            this.$store.state.userinfo.type=res.Data.type;
            this.$store.state.userinfo.headportrait=res.Data.headportrait.indexOf('/Res')==-1?res.Data.headportrait:'http://www.zhugongzhe.com'+res.Data.headportrait
          cache.setLocal("zgz_user",  this.$store.state.userinfo);
          cache.setLocal('zgz_token',res.token);//设置缓存
          this.$store.state.token = res.token;
          this.$toast("注册成功！");
           setTimeout(function() {
            $router.push({ path: "/user" });
          }, 1000);
        } else {
          MessageBox.alert(res.Data);
        }
      });
    },
    turn_m() {
      this.searchCondition.type = 1;
    },
    turn_c() {
      this.searchCondition.type = 2;
    },
    _sendSmsCode() {
      if (this.searchCondition.phone == "") {
        this.$toast("请填写正确的手机号！");
        return;
      }
      SendSmsCode(this.searchCondition.phone).then(res => {
        this.resend();
      });
    },
    resend() {
      var TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.register-page {
  height: 736px;
  background: #3887fe;
}
// 头部背景颜色
.mint-header {
  background: #3887fe;
}
// logo
.img-box {
  width: 108.3px;
  height: 50px;
  margin: 30px auto;
  img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
}
// 注册选项
.register-select {
  padding: 26px 18px;
  background: #ffffff;
  margin-top: 24px;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 6px;
  display: flex;
  text-align: center;
  justify-content: space-around;
  .m-1 {
    font-size: 16px;
    color: #282828;
  }
  .m-2 {
    font-size: 14px;
    color: #999999;
    margin-top: 14px;
    margin-bottom: 25px;
  }
  .m-img {
    width: 114.3px;
    height: 96.6px;
    margin-bottom: 30px;
    img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
    }
  }
  .m-project {
    font-size: 14px;
    color: #3887fe;
    height: 28px;
    line-height: 28px;
    border: 1px solid #3887fe;
  }
}
// 注册个人
.register-m {
  padding: 26px 18px;
  margin-top: 24px;
  background: #ffffff;
  border-radius: 6px;
  margin-left: 12px;
  margin-right: 12px;
  .m-title {
    display: flex;
    font-size: 14px;
    align-items: center;
    color: #999999;
    .person {
      color: #282828;
      border-bottom: 1px solid #3887fe;
    }
    p {
      padding-bottom: 19px;
      border-bottom: 1px solid #cfcfcf;
    }
    .person-right {
      display: flex;
      align-items: center;
      .m-fenge {
        width: 1px;
        height: 13px;
        background: #999999;
        display: block;
        margin: 0 8px;
      }
    }
  }
}
//输入手机号
.input-phone {
  border: 1px solid #cfcfcf;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 25px;
  input {
    font-size: 14px;
    -webkit-input-placeholder {
      color: #cfcfcf;
    }
  }
  .icon {
    margin-right: 8px;
  }
}

//输入验证码
.input-yanzheng {
  border: 1px solid #cfcfcf;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 24px;
  input {
    width: 65%;
    font-size: 14px;
    height: 20px;
  }
  .fenge {
    width: 1px;
    height: 14px;
    background: #cfcfcf;
    margin-right: 12px;
  }
  .icon {
    margin-right: 8px;
  }

  span {
    font-size: 14px;
    color: #666666;
  }
}
//更改密码
.mint-button {
  border-radius: 20px;
  background: #3887fe;
}
.m-xieyi {
  display: flex;
  margin-top: 9px;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
  div {
    display: flex;
    align-items: center;
    input {
      width: 20px;
      height: 20px;
      display: block;
      margin-right: 5px;
    }
  }
  .xieyi-left {
   
    .left-2 {
      color: #999999;
      margin-left: 5px;
    }
    .left-3 {
      color: #3887fe;
      text-decoration: underline;
    }
  }
  .xieyi-right {
    color: #3887fe;
  }
}
</style>
